<template>
	<view class="jinjian_page">
		<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/bdbj.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<view class="back">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/1.png" @click="returnPage" mode=""></image>
			<view class="back_title">
				<view class="title">数字门店进件</view>
				<view class="sub">请认真如实填写您的表单内容</view>	
			</view>
		</view>
		<view class="form_box">
			<view class="inp_box">
				<view class="inp_title">门店名称</view>
				<view class="inp">
					<input type="text" v-model="shop_name" placeholder="请填写门店名称" placeholder-style="font-size:24upx" />
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">门店地址</view>
				<view class="inp">
					<input type="text" v-model="shop_dz" placeholder="请填写门店地址" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">商户简称</view>
				<view class="inp">
					<input type="text" v-model="shop_jc" placeholder="请填写商户简称" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">商户电话</view>
				<view class="inp">
					<input type="text" v-model="shop_dh" placeholder="请填写商户电话" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="img_box">
				<view class="logo_box">
					<view class="titles">上传logo</view>
					<view class="dianji" v-if="logo_img==''" @click="add_brand()">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/3.png" mode=""></image>
					</view>
					<view class="shangchuan" v-else>
						<image @click="del()" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/2.png" mode="" class="del"></image>
						<image :src="logo_img" mode="" class="hq"></image>
					</view>
				</view>
				<view class="logo_box">
					<view class="titles">门头照片</view>
					<view class="dianji" v-if="mt_img==''" @click="add_brand1()">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/3.png" mode=""></image>
					</view>
					<view class="shangchuan" v-else>
						<image  class="del" @click="del1()" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/2.png" mode=""></image>
						<image class="hq" :src="mt_img" mode=""></image>
					</view>
				</view>
				<view class="logo_box">
					<view class="titles">店内环境</view>
					<view class="dianji" v-if="dn_img==''" @click="add_brand2()">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/3.png" mode=""></image>
					</view>
					<view class="shangchuan" v-else>
						<image class="del" @click="del2()" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/2.png" mode=""></image>
						<image class="hq" :src="dn_img" mode=""></image>
					</view>
				</view>
				<view class="logo_box">
					<view class="titles">营业执照</view>
					<view class="dianji" v-if="yz_img==''" @click="add_brand3()">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/3.png" mode=""></image>
					</view>
					<view class="shangchuan" v-else>
						<image class="del" @click="del3()" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/2.png" mode=""></image>
						<image class="hq" :src="yz_img" mode=""></image>
					</view>
				</view>
				<view class="logo_box">
					<view class="titles">经营许可证</view>
					<view class="dianji" v-if="jy_img==''" @click="add_brand4()">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/3.png" mode=""></image>
					</view>
					<view class="shangchuan" v-else>
						<image class="del" @click="del4()" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/2.png" mode=""></image>
						<image class="hq" :src="jy_img" mode=""></image>
					</view>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">银行卡卡号</view>
				<view class="inp">
					<input type="text" v-model="back_card" placeholder="请填写银行卡卡号" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">开户行地址</view>
				<view class="inp">
					<input type="text" v-model="back_name" placeholder="请填写开户行地址" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">邮箱</view>
				<view class="inp">
					<input type="text" v-model="email" placeholder="请填写邮箱账号" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">法人支付宝账号/企业支付宝账号</view>
				<view class="inp">
					<input type="text" v-model="zfb" placeholder="请填写支付宝账号" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">法人姓名</view>
				<view class="inp">
					<input type="text" v-model="name" placeholder="请填写法人姓名" placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="inp_box">
				<view class="inp_title">法人微信号</view>
				<view class="inp">
					<input type="text" v-model="wx" placeholder="请填写微信账号"  placeholder-style="font-size:24upx"/>
				</view>
			</view>
			<view class="lian_hang">
				<view class="p_1">所开通类型</view>
				<view class="p_2">
					<view class="iconfont" style="font-size: 24upx;color: #000000;margin-left: 15upx;">开通类型</view>
					<picker mode="selector" :range="new_zhuying" name="industry" range-key="mm" @change="handleConfirms" style="font-size: 24upx;color: #ff0000;">{{checkname}}</picker>
				</view>
			</view>
			<view class="sfz_box">
				<view class="inp_title">上传法人身份证</view>
				<view class="shangchuan">
					<view class="" style="text-align: center;">
						<imageysy
							:dataList="imageList"
							:uploadUrl="uploadUrl"
							:types="category"
							:deleteUrl="deleteUrl"
							:uploadCount="1"
							type="image"
							@successImage="successImage"
							@successVideo="successvideo"
							:token="token"
						></imageysy>
						<view class="" style="font-size: 24upx; color: #000000;">上传身份证正面</view>
					</view>
					<view class="" style="text-align: center;">
						<imageysy
							:dataList="imageList"
							:uploadUrl="uploadUrl"
							:types="category"
							:deleteUrl="deleteUrl"
							:uploadCount="1"
							type="image"
							@successImage="successImage1"
							@successVideo="successvideo1"
							:token="token"
						></imageysy> 
						<view class="" style="font-size: 24upx; color: #000000;">上传身份证反面</view>
					</view>
				</view>
			</view>
			<view class="submit" @click="sumbmit()">提交</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/Config.js';
	import imageysy from '@/components/imageChoose_ysy/imageChoose_ysy.vue';
	export default {
		components: {
			imageysy
		},
		data() {
			return {
				name:'',//姓名
				shop_name:'',//门店名称
				shop_dz:'',//门店地址
				shop_jc:'',//门店简称
				shop_dh:'',//门店电话
				logo_img:'',//logo
				mt_img:'',//门头
				dn_img:'',//店内
				yz_img:'',//营业执照
				jy_img:'',//经营许可证
				back_card:'',//银行卡号
				back_name:'',//开户行
				email:'',//邮箱
				zfb:'',//支付宝
				wx:'',//微信
				checkname:'选择经营类型',
				new_zhuying:['省运营','服务站','商家',],
				type:null,
				uploadUrl: '/addons/cos/index/upload',
				deleteUrl: '/api/common/delete',
				sfz_f:'',//身份证反面
				sfz_z:'',//身份证正面
				category: 'image',
				imageList: [],
				token:'',
				shop_id:null,
				seller_id:null,
				buyers_id:null,
				user_id:'',
				money:'',
				shop_turnover:'',
				space_name:'',
				space_value:''
			};
		},
		onLoad(option) {
			this.token=option.token
			this.shop_id=option.shop_id
			this.seller_id=option.shop_id
			this.buyers_id=option.shop_id
			this.user_id=option.user_id
			this.money=option.money
			this.shop_turnover=option.shop_turnover
			this.space_name=option.space_name
			this.space_value=option.space_value
		},
		methods:{
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			},
			del(){
				this.logo_img=''
			},
			del1(){
				this.mt_img=''
			},
			del2(){
				this.dn_img=''
			},
			del3(){
				this.yz_img=''
			},
			del4(){
				this.jy_img=''
			},
			handleConfirms(item){
				  console.log(item.target.value)
                  this.checkname=this.new_zhuying[item.detail.value]
				 this.type=item.target.value
			},
			//上传logo
			add_brand(){
				uni.showLoading({
					title:'正在上传'
				})
				uni.chooseImage({
					count: 1,
					sizeType:['copressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];	
						console.log(tempFilePaths)
						var userInfo = uni.getStorageSync('userInfo')
						uni.uploadFile({
							url: config.teaurl+'/addons/cos/index/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							header:{},
							formData: {
								'token':this.token,
								 costoken: "B8B5uO7kiA16b",
							},
							success: (res) => {
								var data = JSON.parse(res.data)
								console.log("圖片上傳成功",data);
								if(data.code==1){
									this.logo_img=data.data.fullurl
								}else{
									this.Unfold_data.showWindow(data.msg);
								}
								
							}
						});
						// console.log(chooseImageRes)
					}
				});
				
				//隐藏等待状态
				uni.hideLoading();
			},	
			//上传门头照片	
			add_brand1(){
				uni.showLoading({
					title:'正在上传'
				})
				uni.chooseImage({
					count: 1,
					sizeType:['copressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];	
						console.log(tempFilePaths)
						var userInfo = uni.getStorageSync('userInfo')
						uni.uploadFile({
							url:config.teaurl+'/addons/cos/index/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							header:{},
							formData: {
								'token':this.token,
								costoken: "B8B5uO7kiA16b",
							},
							success: (res) => {
								var data = JSON.parse(res.data)
								console.log("圖片上傳成功",data);
								if(data.code==1){
									this.mt_img=data.data.fullurl
								}else{
									this.Unfold_data.showWindow(data.msg);
								}
								
							}
						});
						// console.log(chooseImageRes)
					}
				});
				
				//隐藏等待状态
				uni.hideLoading();
			},
			add_brand2(){
				uni.showLoading({
					title:'正在上传'
				})
				uni.chooseImage({
					count: 1,
					sizeType:['copressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];	
						console.log(tempFilePaths)
						var userInfo = uni.getStorageSync('userInfo')
						uni.uploadFile({
							url: config.teaurl+'/addons/cos/index/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							header:{},
							formData: {
								'token':this.token,
								costoken: "B8B5uO7kiA16b",
							},
							success: (res) => {
								var data = JSON.parse(res.data)
								console.log("圖片上傳成功",data);
								if(data.code==1){
									this.dn_img=data.data.fullurl
								}else{
									this.Unfold_data.showWindow(data.msg);
								}
								
							}
						});
						// console.log(chooseImageRes)
					}
				});
				
				//隐藏等待状态
				uni.hideLoading();
			},
			add_brand3(){
				uni.showLoading({
					title:'正在上传'
				})
				uni.chooseImage({
					count: 1,
					sizeType:['copressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];	
						console.log(tempFilePaths)
						var userInfo = uni.getStorageSync('userInfo')
						uni.uploadFile({
							url: config.teaurl+'/addons/cos/index/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							header:{},
							formData: {
								'token':this.token,
								costoken: "B8B5uO7kiA16b",
							},
							success: (res) => {
								var data = JSON.parse(res.data)
								console.log("圖片上傳成功",data);
								if(data.code==1){
									this.yz_img=data.data.fullurl
								}else{
									this.Unfold_data.showWindow(data.msg);
								}
								
							}
						});
						// console.log(chooseImageRes)
					}
				});
				
				//隐藏等待状态
				uni.hideLoading();
			},
			add_brand4(){
				uni.showLoading({
					title:'正在上传'
				})
				uni.chooseImage({
					count: 1,
					sizeType:['copressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];	
						console.log(tempFilePaths)
						var userInfo = uni.getStorageSync('userInfo')
						uni.uploadFile({
							url:config.teaurl+'/addons/cos/index/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							header:{},
							formData: {
								'token':this.token,
								costoken: "B8B5uO7kiA16b",
							},
							success: (res) => {
								var data = JSON.parse(res.data)
								console.log("圖片上傳成功",data);
								if(data.code==1){
									this.jy_img=data.data.fullurl
								}else{
									this.Unfold_data.showWindow(data.msg);
								}
								
							}
						});
						// console.log(chooseImageRes)
					}
				});
				
				//隐藏等待状态
				uni.hideLoading();
			},
		    successImage(e) {
		    	var data = JSON.parse(e.data);
		    	this.Unfold_data.showWindow(data.msg)
		    	this.sfz_z = data.data.fullurl;
		    },
			successImage1(e) {
		    	var data = JSON.parse(e.data);
		    	this.Unfold_data.showWindow(data.msg)
		    	this.sfz_f = data.data.fullurl;
		    },
			successvideo(e) {
				console.log(e);
			},
			successvideo1(e) {
				console.log(e);
			},
			sumbmit(){
				if(this.name==''){
					this.Unfold_data.showWindow('请填写姓名')
					return
				}
				if(this.shop_name==''){
					this.Unfold_data.showWindow('请填写门店名称')
					return
				}
				if(this.shop_dz==''){
					this.Unfold_data.showWindow('请填写门店地址')
					return
				}
				if(this.shop_jc==''){
					this.Unfold_data.showWindow('请填写门店简称')
					return
				}
				if(this.shop_dh==''){
					this.Unfold_data.showWindow('请填写门店电话')
					return
				}
				if(this.logo_img==''){
					this.Unfold_data.showWindow('请上传logo')
					return
				}
				if(this.mt_img==''){
					this.Unfold_data.showWindow('请上传门头照片')
					return
				}
				if(this.dn_img==''){
					this.Unfold_data.showWindow('请上传店内照片')
					return
				}
				if(this.yz_img==''){
					this.Unfold_data.showWindow('请上传营业执照')
					return
				}
				if(this.jy_img==''){
					this.Unfold_data.showWindow('请上传经营许可证')
					return
				}
				if(this.checkname=='选择经营类型'){
					this.Unfold_data.showWindow('请选择类型')
					return
				}
				if(this.sfz_z==''){
					this.Unfold_data.showWindow('请上传身份证正面')
					return
				}
				if(this.sfz_f==''){
					this.Unfold_data.showWindow('请上传身份证反面')
					return
				}
				let url='/api/store/store/add'
				let params={
					license_image:this.yz_img,
					operator:this.name,
					zidentity_card_image:this.sfz_z,
					fidentity_card_image:this.sfz_f,
					abbreviation:this.shop_jc,
					phone:this.shop_dh,
					name:this.shop_name,
					address:this.shop_dz,
					door_image:this.mt_img,
					environment_images:this.dn_img,
					logo_image:this.logo_img,
					management_image:this.jy_img,
					bank_card_no:this.back_card,
					bank_address:this.back_name,
					email:this.email,
					zfb:this.zfb,
					weixin:this.wx,
					type:this.type,
					user_id:this.user_id,
				}
				this.Unfold_data.tea_data(params, 'POST', url, res => {
					if(res.data.code==1){
						this.Unfold_data.showWindow('提交成功，请等待后台审核')
						let url1='/api/profit/Swt_number_shop'
						let params1={
							shop_id:this.seller_id,
							user_id:this.user_id,
							money:this.money,
							order_id:'SaaS_SZMD_'+this.space_value,
						}
						this.Unfold_data.tea_data(params1, 'POST', url1, res => {
							if(res.data.code==1){
								uni.reLaunch({
									url:'../home/home?token='+this.token+"&shop_id="+this.shop_id
								})
							}else{
								this.Unfold_data.showWindow(res.data.msg)
							}
						})
					}else{
						this.Unfold_data.showWindow(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.jinjian_page{
	width: 750upx;
	.back{
		padding-top: 80upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		image{
			width: 50upx;
			height: 40upx;
			margin-left: 30upx;
		}
		.back_title{
			margin-left: 30upx;
			.title{
			    font-size: 36upx;
			    font-family: Source Han Sans CN;
			    font-weight: 400;
			    color: #FFFFFF;	
			}
			.sub{
				font-size: 16upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.form_box{
		width: 680upx;
		padding: 50upx;
		background: #FFFFFF;
		box-shadow: 0px 8upx 20upx rgba(60, 106, 228, 0.49);
		border-radius: 16upx;
		margin: 70upx auto 0;
		.inp_box{
			margin-bottom: 40upx;
			.inp_title{
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
			}
			.inp{
				width: 580upx;
				height: 60upx;
				background: #F8F9FA;
				opacity: 1;
				border-radius: 8upx;
				margin-top: 20upx;
				input{
					width: 580upx;
					height: 60upx;
					margin-left: 20upx;
				}
			}
		}
		.img_box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			font-weight: bold;
			.logo_box{
				width: 30%;
				margin-right: 3%;
				margin-bottom: 30upx;
				.titles{
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
				.dianji{
					margin-top: 30upx;
					image{
						width: 170upx;
						height: 120upx;
					}
				}
				.shangchuan{
					position: relative;
					.del{
						width: 40upx;
						height: 40upx;
						border-radius: 50%;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 1;
					}
					.hq{
						width: 170upx;
						height: 120upx;
					}
				}
			}
		}
		.lian_hang{
			.p_1{
				font-size: 28upx;
				color: #000000;
			}
			.p_2{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 290px;
				height: 30px;
				background: #F8F9FA;
				opacity: 1;
				border-radius: 4px;
				margin-top: 10px;
			}
		}
		.sfz_box{
			margin-top: 40upx;
			.inp_title{
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
			}
			.shangchuan{
				margin-top: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		.submit{
			width: 580upx;
			margin: 40upx auto 0;
			height: 96upx;
			background: #287BE7;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 20upx;
			font-size: 34upx;
			color: #FFFFFF;
			border-radius: 10upx;
		}
	}
}
</style>
